<template>
    <div class="main">
        <div class="top">
            <div class="left">
                <span>需求描述： </span>
                <el-input v-model="input" placeholder="请输入内容"></el-input>
                <span style="margin-left: 60px;">应用场景： </span>
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-button @click="search" type="primary">查询</el-button>
                <el-button @click="nosearch" style="margin-left: 10px; width: 80px;">重置</el-button>
            </div>
        </div>
        <el-button type="primary" class="button" @click="show1">新增文件</el-button>
        <el-table class="table" :data="tableData" tooltip-effect="dark" style="width: 100%" fit
            :row-style="{ height: '50px' }"
            :header-cell-style="{ fontSize: '18px', backgroundColor: '#D4E8FD', color: '#333' }">
            <el-table-column label="序号" type="index" width="80"> </el-table-column>
            <el-table-column prop="name" label="需求描述" width="220" show-overflow-tooltip></el-table-column>
            <el-table-column prop="type" label="应用场景" width="220"></el-table-column>
            <el-table-column prop="host" label="版本"></el-table-column>
            <el-table-column prop="order" label="优先级"></el-table-column>
            <el-table-column prop="date" label="提交日期" width="200"></el-table-column>
            <el-table-column prop="staus" label="审批状态"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <a href="text/javascript" style="margin-right: 20px;">详情</a>
                    <a href="text/javascript" style="margin-right: 20px;">编辑</a>
                    <a href="text/javascript" style="margin-right: 20px;color: red;" @click="handleDelete">删除</a>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog title="新增指标数据" v-model="isShow" width="800px" :append-to-body="true" class="data-dialog" :modal="true">
        <el-form :model="form" label-width="120px" :rules="rule1" class="get-form">
            <el-button @click="moban">下载模板</el-button>
            <el-button>模板导入</el-button>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="需求描述：" prop="name">
                        <el-input v-model="form.name" width="220px" style="width: 220px;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="应用场景：" prop="type">
                        <el-input v-model="form.type" width="220px" style="width: 220px;"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="版本：">
                        <el-input v-model="form.host" width="220px" style="width: 220px;" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="优先级：" prop="order">
                        <el-input v-model="form.order" width="220px" style="width: 220px;"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="需求详情">
                <el-input type="textarea" :rows="10" maxlength="200"   show-word-limit placeholder="请输入内容" v-model="form.info">
                </el-input>

            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cale"> 取消 </el-button>
                <el-button type="primary" @click="add"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog title="模板列表" v-model="show" width="500px" :append-to-body="true" class="list" :modal="true">
        <el-table class="table1" :data="listData" tooltip-effect="dark" style="width: 100%"
            :row-style="{ height: '20px' }"
            :header-cell-style="{ fontSize: '12px', backgroundColor: '#D4E8FD', color: '#333' }">
            <el-table-column label="序号" type="index" width="50"> </el-table-column>
            <el-table-column prop="name" label="类型" width="120"></el-table-column>
            <el-table-column prop="type" label="模板名称" width="180"></el-table-column>
            <el-table-column label="操作" width="120">
                <template #default="scope">
                    <a href="javascript:" style="margin-right: 20px;" @click="updoad">下载</a>
                </template>
            </el-table-column>
            </el-table>
    </el-dialog>
</template>

<script>
import download from 'downloadjs';

export default {
    data() {
        return {
            input: "",
            isShow: false,
            show:false,
            form: { name: "", type: "", host: "v1.0",order:"",info:"" },
            options: [{
                label: "全部",
                value: "全部",
            }],
            value: '全部',
            tableData: [
                {
                    name: "登岛作战",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标2进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标3进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标4进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标5进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标6进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标7进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标8进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标9进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                },
                {
                    name: "对目标10进行火力打击",
                    type: "火力打击",
                    host: "v1.0",
                    order: "P0",
                    staus: "审批通过",
                    date: "2024-08-12 16:00:00"
                }
            ],
            listData:[
                {
                    name:"火力打击",
                    type:"火力打击1.xlsx"
                },
                {
                    name:"火力打击",
                    type:"火力打击2.docx"
                },
                {
                    name:"火力打击",
                    type:"火力打击3.xlsx"
                },
                {
                    name:"火力打击",
                    type:"火力打击4.docx"
                },
                {
                    name:"火力打击",
                    type:"火力打击5.xlsx"
                },
                {
                    name:"火力打击",
                    type:"火力打击6.docx"
                },
                {
                    name:"目标侦察",
                    type:"目标真侦察1.xlsx"
                },
                {
                    name:"目标侦察",
                    type:"目标真侦察2.xlsx"
                },
                {
                    name:"目标侦察",
                    type:"目标真侦察3.docx"
                },
                {
                    name:"目标侦察",
                    type:"目标真侦察4.docx"
                },
            ],
            copy: [],
            rule1: {
                name: [{ required: true, message: '需求描述不能为空', trigger: 'blur' }],
                type: [{ required: true, message: '应用场景不能为空', trigger: 'blur' }],
                order: [{ required: true, message: '优先级不能为空', trigger: 'blur' }],
            },
        }
    },
    methods: {
        show1(){
            this.isShow=true;
        },
        cale(){
            this.isShow=false;
        },
        moban(){
            this.show=true;
        },
        updoad(){
            this.show=false;
            const file='/file/task.xlsx';
         download(file)
        },
        search() {
            this.copy = this.tableData;
            this.tableData = this.tableData.filter(item => item.name.includes(this.input) || item.type.includes(this.input) || item.host.includes(this.input) || item.date.includes(this.input));
        },
        nosearch() {
            this.tableData = this.copy;
            this.input = "";
        }
    }
}
</script>

<style lang="less" scoped>
@import url("../font/file.less");
</style>